<script setup>
    import { getDetail } from '@/network/detail';
    import {useRoute} from 'vue-router'
    import {ref, onMounted} from 'vue'
    import { useCartStore } from '@/stores/cartStore';

    import DetailHot from './components/DetailHot.vue'
    // 全局组件已导入
    // // 放大镜
    // import Magnifier from '@/components/magnifier/index.vue'

    // // SKU组件
    // import XtxSku from '@/components/Xtxsku/index.vue'

    const route = useRoute()
    const goods = ref({})
    const getGoods = async () => {
        const res = await getDetail(route.params.id)
        // console.log(res);
        goods.value = res.result
    }
    
    onMounted(() => {
        getGoods()
    })

    // sku组件，规格被操作时
    let skuObj = {}
    function skuChange(sku) {
        // console.log(sku);
        skuObj = sku
    }

    // 加数量组件
    const count = ref(1)
    const countChange = (count) => {
        // console.log(count);
    }

    // 添加购物车
    const cartStore = useCartStore()
    function addCart() {
        if (skuObj.skuId) {
            // 存入pinia数据
            cartStore.addCart({
                id: goods.value.id,
                name: goods.value.name,
                picture: goods.value.mainPictures[0],
                price: goods.value.price,
                count: count.value,
                skuId: skuObj.skuId,
                specsText: skuObj.specsText,
                selected: true, // 商品是否选中
            })
        } else {
            // 提示选规格
            
            ElMessage({
                type: 'warning',
                message: '请选择规格'
            })
        }
    }


</script>


<template>
    <div class="detail">
        <!-- 1. 也可用判断 Object.keys(goods).length !== 0 
            2. 数据字段
        -->
        <div class="container" v-if="goods.details">
            <!-- 面包屑导航 -->
            <div class="bread">
                <el-breadcrumb separator=">">
                    <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
                    <!-- undefined报错 -->
                    <!-- 原因：数据异步还没回来，goods默认是对象 {}.categories -> undefined
                        undefined.[1] 相当于undefined.undefined 会报错
                        1. 可选链的语法goods.categories?.[1].id
                        2. v-if手动控制渲染时机，有数据才渲染
                     -->
                    <el-breadcrumb-item :to="`/layout/category/${goods.categories[1].id}`">{{goods.categories[1].name}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="`/layout/category/sub/${goods.categories[0].id}`">{{goods.categories[0].name}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="'/'">{{goods.name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="info-container">
                <div class="goods-info">
                    <div class="magnifier">
                        <XtxMagnifier :image-list="goods.mainPictures"></XtxMagnifier>
                        <!-- 统计信息 -->
                        <ul class="goods-sales">
                            <li>
                                <p>销量人气</p>
                                <p>{{goods.salesCount}}</p>
                                <p>
                                    <i class="iconfont icon-task-filling"></i>
                                    销量人气
                                </p>
                            </li>
                            <li>
                                <p>人气评价</p>
                                <p>{{goods.commentCount}}</p>
                                <p>
                                    <i class="iconfont icon-comment-filling"></i>
                                    查看评价
                                </p>
                            </li>
                            <li>
                                <p>收藏人气</p>
                                <p>{{goods.collectCount}}</p>
                                <p>
                                    <i class="iconfont icon-favorite-filling"></i>
                                    收藏商品
                                </p>
                            </li>
                            <li>
                                <p>品牌信息</p>
                                <p>{{goods.brand.name}}</p>
                                <p>
                                    <i class="iconfont icon-dynamic-filling"></i>
                                    品牌主页
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="spec">
                        <p class="name">{{goods.name}}</p>
                        <p class="desc">{{goods.desc}}</p>
                        <p class="price">
                            <span>{{goods.price}}</span>
                            <s>{{goods.oldPrice}}</s>
                        </p>
                        <div class="service">
                            <dl>
                                <dt>促销</dt>
                                <dd>12月好物放送，App领券购买直降120元</dd>
                            </dl>
                            <dl>
                                <dt>服务</dt>
                                <dd>
                                    <span>无忧退货</span>
                                    <span>快速退款</span>
                                    <span>免费包邮</span>
                                    <a href="javascript:;">了解详情</a>
                                </dd>
                            </dl>
                        </div>
                        <!-- sku组件 -->
                        <XtxSku :goods="goods" @change="skuChange"></XtxSku>
                        <!-- 数据组件 -->
                        <!-- @change="countChange" -->
                        <el-input-number :min="1" v-model="count" @click="countChange(count)"/>
                        <!-- 按钮 -->
                        <div>
                            <el-button size="large" class="btn" @click="addCart">
                                加入购物车
                            </el-button>
                            {{ cartStore.cartList }}
                        </div>
                    </div>
                </div>
                <div class="goods-footer">
                    <div class="goods-article">
                        <nav>
                            <h3>商品详情</h3>
                        </nav>
                        <div class="goods-detail">
                            <ul>
                                <li v-for="item in goods.details.properties" :key="item.value">
                                    <span>{{item.name}}</span>
                                    <span>{{item.value}}</span>
                                </li>
                            </ul>
                            <img v-for="item in goods.details.pictures" v-img-lazy="item" :key="item" alt="">
                        </div>
                    </div>
                    <div class="goods-aside">
                        <detail-hot hot-type="1"></detail-hot>
                        <detail-hot hot-type="2"></detail-hot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<style scoped lang='scss'>
    .detail{
        .bread{
            padding: 25px 0;
        }
        .info-container{
            .goods-info{
                display: flex;
                background: #fff;
                .magnifier{
                    width: 580px;
                    height: 600px;
                    padding: 30px 50px;
                    
                    .goods-sales{
                        display: flex;
                        width: 400px;
                        height: 140px;
                        align-items: center;
                        text-align: center;
                        li{
                            flex: 1;
                            p{
                                &:first-child{
                                    color: #999;
                                }
                                &:nth-child(2){
                                    color: $priceColor;
                                    margin-top: 10px;
                                }
                                &:last-child{
                                    color: #666;
                                    margin-top: 10px;
                                    &:hover{
                                        color: $xtxColor;
                                        cursor: pointer;
                                    }
                                    i{
                                        color: $xtxColor;
                                        font-size: 14px;
                                    }
                                }
                            }
                        }
                    }
                }
                .spec{
                    flex: 1;
                    padding: 30px 30px 30px 0;
                    .name{
                        font-size: 22px;
                    }
                    .desc{
                        margin-top: 10px;
                        color: #999;
                    }
                    .price{
                        margin-top: 10px;
                        span{
                                color: $priceColor;
                                font-size: 22px;
                                margin-right: 10px;
                                &::before{
                                    content: '￥';
                                    font-size: 14px;
                                }
                               
                        }
                        s{
                            color: #999;
                            &::before{
                                content: '￥';
                                font-size: 14px;
                            }
                        }
                    }

                    .service{
                        width: 500px;
                        background: #f5f5f5;
                        padding: 20px 10px 0 10px;
                        margin-top: 10px;
                        dl{
                            display: flex;
                            padding-bottom: 20px;
                            dt{
                                width: 50px;
                                color: #999;
                            }
                            dd{
                                color: #666;
                                &:last-child{
                                    span{
                                        margin-right: 10px;
                                        &::before{
                                            content: '•';
                                            color: $xtxColor;
                                            margin-right: 2px;
                                        }
                                    }
                                    a{
                                        color: $xtxColor;
                                    }
                                }
                            }
                        }
                    }
                    .btn{
                        margin-top: 20px;
                    }
                }
            }
            .goods-footer{
                display: flex;
                margin-top: 20px;
                .goods-article{
                    width: 940px;
                    background: #fff;
                    margin-right: 20px;
                    nav{
                        border-bottom: 1px solid #f5f5f5;
                        h3{
                            height: 70px;
                            line-height: 70px;
                            font-size: 18px;
                            font-weight: normal;
                            padding: 0 40px;
                            
                        }
                    }
                    .goods-detail{
                        padding: 40px;
                        ul{
                            display: flex;
                            flex-wrap: wrap;
                            margin-bottom: 30px;
                            li{
                                display: flex;
                                width: 50%;
                                margin-bottom: 10px;
                                span{
                                    &:first-child{
                                        width: 100px;
                                        color: #999;
                                    }
                                    &:last-child{
                                        flex: 1;
                                        color: #666;
                                    }
                                }
                            }
                        }
                        img{
                            width: 100%;
                        }
                    }
                }
                .goods-aside{
                    width: 280px;
                }
            }
        }
    }
</style>